<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .menuBar{
            width: 200px;
            padding: 5px 0;
            text-indent: 10px;
            border: 1px solid #333;
            line-height: 30px;
            font-size: 13px;
            position: fixed;
            display: none;
        }
        .menuBar .menu li:hover{
            background-color: #333;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="menuBar">
        <ul class="menu">
            <li class="copy">复制</li>
            <li class="paste">粘贴</li>
            <li class="cut">剪切</li>
            <li class="reload">刷新</li>
        </ul>
    </div>
</body>
<script>
    // 需求自定义菜单  
    var menuBar = document.getElementsByClassName("menuBar")[0];

    // 阻止默认菜单
    document.oncontextmenu = function(e){
        console.log(e);
        // 阻止默认菜单
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false; 
        }

        // 根据事件对象获取鼠标的位置 => 将菜单定过去
        var x = e.clientX;
        var y = e.clientY;

        menuBar.style.left = x + "px";
        menuBar.style.top = y + "px";
        
        menuBar.style.display = "block";

    }

    document.onmousedown = function(){
        menuBar.style.display = "none";
    }

    menuBar.onmousedown = function(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }

        var target = e.target || e.srcElement; 
        if(target.className == "copy"){
            console.log("点击了复制");
        }else if(target.className == "paste"){
            console.log("点击了粘贴");
        }else if(target.className == "cut"){
            console.log("点击了剪切");
        }else if(target.className == "reload"){
            console.log("点击了刷新");
            location.reload();
        }

        menuBar.style.display = "none";

    }

  







</script>
</html>